<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="../../plugins/mui/mui.min.css" rel="stylesheet"/>
		<link href="../../css/index/index_menu.css" rel="stylesheet"/>
		<link href="../../css/style.css" rel="stylesheet"/>
		<script src="../../js/statistics.js"></script>
		<style>
			.foot{
				background: url("../../images/icon/index/footer-bg.png") no-repeat;
				background-size: auto 100%;
				background-position: center 5px;
			}
		</style>
	</head>
	<body>
		<div class="foot">
			<div class="foot-box active">
				<img src="../../images/icon/index/house-red.png" />
				<span>首页</span>
			</div>
			<div class="scan">
				<img src="../../images/icon/index/scan.png" class="scanImg" />
			</div>
			<div class="foot-box">
				<img src="../../images/icon/index/user.png" />
				<span>我的</span>
			</div>
			<canvas id="footCanvas"></canvas>
		</div>
		<script src="../../plugins/mui/mui.min.js"></script>
		<script src="../../plugins/jquery/jquery-3.1.0.min.js"></script>
		<script src="../../js/fontset.js"></script>
		<script src="../../js/getApiToken.js"></script>
		<script src="../../js/md5.js"></script>
		<script src="../../js/update.js"></script>
		<script>
			var webviewArray = ['main_1.html','../my/my.html'],
				barArray =[];
			mui.init({
				keyEventBind: {
					backbutton: true,  
					menubutton: true   
				} 
//				subpages: [{
//					url: 'main_1.html',
//					id: 'main',
//					styles: {
//				        top: '0',
//				        bottom: '52px'
//				        
//				    }
//				}]
			});

			mui.plusReady(function(){
				initMainWeb();
//				drawBezier();
				var agent = plus.navigator.getUserAgent();
					plus.storage.setItem('cg_agent',agent);
				$(".foot-box").on('tap',function(){
					var classname = $(this).attr('class'),
						img = $(this).find('img').attr('src'),
						oldImg = $(this).siblings('.foot-box').find('img').attr('src'),
						index = $(this).index();
					if(classname.indexOf('active') == -1) {
						var newSrc = img.substr(0,img.length-4) + '-red.png',
							oldSrc = oldImg.substr(0,oldImg.length-8) + '.png';
						$(this).addClass('active').siblings().removeClass('active');
						$(this).find('img').attr('src',newSrc);
						$(this).siblings('.foot-box').find('img').attr('src',oldSrc);
					}
					if(index == 0){
						barArray[0].show();
						barArray[1].hide();
					}else{
						barArray[1].show();
						barArray[0].hide();
					} 
				});
				$(".scan").on('tap',function(){
					mui.openWindow({ 
						url:'../address_list/scan_qr.html',
						id:'scan_qr',
						waiting:{
				      		autoShow:true,//自动显示等待框，默认为true
				      		title:'正在加载...'//等待对话框上显示的提示内容
      					}
					})
				});
				//关闭启动页
				setTimeout(function(){
					plus.navigator.closeSplashscreen();
				},500);
			})
			//重写back 
			var first = null;
		    mui.back = function(){
		        //首次按键，提示‘再按一次退出应用’
		        if(!first){
		            first = new Date().getTime();
		            mui.toast('再按一次即退出应用');
		            setTimeout(function(){
		                first = null;
		            },1000);
		        }else{
		            if(new Date().getTime()-first<1000){
		                plus.runtime.quit();
		            }
		        }
		    }
		    //初始化加载首页
		    function initMainWeb(){
		    	var menuWebview = plus.webview.currentWebview();
		    	for(i=0;i<webviewArray.length;i++){
		    		barArray[i] = mui.preload({
						url: webviewArray[i],
						id: webviewArray[i],
						styles:{
							top: '0',
							bottom:'66px',
							left:'0',
							bounce: 'vertical'
						},
						waiting:{
				      		autoShow:true,//自动显示等待框，默认为true
				      		title:'正在加载...',//等待对话框上显示的提示内容
      					},
      					extras:{
      						type:0
      					}
					});
					barArray[i].hide();
					menuWebview.append(barArray[i]);
		    	}
				barArray[0].show();
				
		    }
			function drawBezier() {
				var clientWidth= document.body.clientWidth;
				var footCanvas=document.getElementById('footCanvas');
				footCanvas.height=50*2;
				footCanvas.width=clientWidth*2;
//				var bezierWidth=clientWidth*0.35;
				var bezierWidth=130*2;
				console.log(bezierWidth)
				var startP=(clientWidth*2-bezierWidth)/2;
				var topP=8;
				var bottomP=41*2;
				var c=document.getElementById("footCanvas");
				var ctx=c.getContext("2d");
				ctx.strokeStyle="rgba(255,255,255,0.1)";
				ctx.shadowColor="rgba(0,0,0,.1)";
				ctx.shadowBlur=8;
				ctx.shadowOffsetY=-4;
				ctx.beginPath();
				ctx.moveTo(0, topP);
				ctx.lineTo(startP, topP);
				ctx.bezierCurveTo(startP+bezierWidth*0.3, topP, startP+bezierWidth*0.2, bottomP, startP+bezierWidth*0.5, bottomP);
				ctx.bezierCurveTo(startP+bezierWidth*0.8,bottomP,startP+bezierWidth*0.7,topP,startP+bezierWidth,topP);
				ctx.lineTo(clientWidth*2, topP);
				ctx.lineTo(clientWidth*2, 100);
				ctx.lineTo(0, 100);
				ctx.lineTo(0, topP);
				ctx.fillStyle='#fff'
				ctx.fill();
				footCanvas.style.width=clientWidth+'px';
				footCanvas.style.height='50px'
			}
		</script>
	</body>
</html>
